<#include "header.ftl">
<style>
  #imgBox img {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 4px 0;
  }
</style>
<div class="container">
  <div class="box box-pink">
    <div class="box-header">
      <h4 class="box-title"><span class="fa fa-plus-circle"></span>在线报名</h4>
    </div>
    <div class="box-body">
      <#if canReg>
        <form class="form-horizontal">
          <div class="form-group">
            <label for="username" class="control-label col-lg-2 col-sm-2 col-xs-4">姓名</label>
            <div class="col-lg-10 col-sm-10">
              <input name="name" id="username" class="form-control" placeholder="请输入你的大名" required>
            </div>
          </div>
          <div class="form-group">
            <label for="studentId" class="control-label col-lg-2 col-sm-2 col-xs-4">学号</label>
            <div class="col-lg-10 col-sm-10">
              <input name="stuId" maxlength="10" id="studentId" class="form-control" placeholder="请输入你的学号" required>
            </div>
          </div>
          <div class="form-group">
            <label for="grade" class="control-label col-lg-2 col-sm-2 col-xs-4">班级</label>
            <div class="col-lg-10 col-sm-10">
              <input name="grade" id="grade" class="form-control" placeholder="请输入你的班级(计科1702)" required>
            </div>
          </div>
          <div class="form-group">
            <label for="sex" class="control-label col-lg-2 col-sm-2 col-xs-4">性别</label>
            <div class="col-lg-10 col-sm-10">
              <select name="sex" id="sex" class="form-control">
                <option value="MAN">男</option>
                <option value="WOMAN">女</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="tel" class="control-label col-lg-2 col-sm-2 col-xs-4">手机号</label>
            <div class="col-lg-10 col-sm-10">
              <input name="tel" type="tel" maxlength="11" id="tel"
                     class="form-control" placeholder="请输入你的手机号码" required>
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="control-label col-lg-2 col-sm-2 col-xs-4">QQ邮箱</label>
            <div class="col-lg-10 col-sm-10">
              <input name="email" type="email" id="email" class="form-control"
                     pattern="^(\w-*\.*){5,}@(\w-?)+(\.[a-zA-Z]{2,3})+$"
                     placeholder="请输入你的QQ邮箱" required>
            </div>
          </div>
          <div class="form-group">
            <label style="z-index: 1000;" for="group" class="control-label col-lg-2 col-sm-2 col-xs-4">
              意向<a target="_blank" href="https://coh5.cn/p/b82d6b87.html">(详情)</a>
            </label>
            <div class="col-lg-10 col-sm-10">
              <select name="group" id="group" class="form-control">
                <option value="WEB">网站组</option>
                <option value="APP">APP组</option>
                <option value="UNITY3D">3D视觉组</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="intro" class="control-label col-lg-2 col-sm-2 col-xs-4">自我描述</label>
            <div class="col-lg-10 col-sm-10">
              <textarea name="intro" id="intro" class="form-control noresize" rows="8" placeholder="请写下一段自我描述(>30字)" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <div id="imgBox" onclick="refresh();" class="col-sm-2 col-xs-4">
              <img src='${root}/verify'>
            </div>
            <div class="col-sm-10 col-xs-8">
              <input name="verify" id="verify" maxlength="6"
                     class="form-control" placeholder="输入验证码" required>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-12">
              <button class="btn btn-info btn-block">提交报名</button>
            </div>
          </div>
        </form>
      <#else>
        <div>
          <div class="alert alert-warning">报名已截止!</div>
        </div>
      </#if>
      <div class="text-center">
          <span class="fa fa-book">
            <a href="https://www.jianshu.com/u/4ea374c3af31" target="_blank" class="text-muted">lkl</a>
          </span>
      </div>
    </div>
  </div>
  <#if canReg>
    <script>
      function refresh() {
        var pra = parseInt(Math.random() * 10000);
        var box = $('#imgBox');
        box.html("");
        box.html("<img src='${root}/verify?"+pra+"'>");
      }

      $("form").submit(function (e) {
        e.preventDefault();
        var self = $(e.target);
        var fd = self.serializeArray();
        if (formAuth(fd)) {
          $.post('${root}/recruit/apply', fd, function (data) {
            if (data.success) {
              layer.alert("报名成功！", {title: "恭喜你", icon: 6});
              self[0].reset();
            } else if (data.code === 401 || data.code === 402) {
              layer.alert(data.msg, {title: '报名失败：', icon: 5});
            } else {
              layer.confirm("你已经报过名，是否重新报名？<br>原因：" + data.msg, {
                title: '重复报名提示!',
                icon: 7,
                btn: ['重新报名', '取消']
              }, function (index) {
                fd.push({name: 'id', value: data.code});
                $.post('${root}/recruit/reapply', fd, function (data) {
                  if (data.success) {
                    layer.alert("重新报名成功！", {title: "恭喜你", icon: 6});
                    self[0].reset();
                  }
                });
                layer.close(index);
              });
            }
          });
        }
      });

      /**
       * 表单验证
       * @param fd 表单数据
       */
      function formAuth(fd) {
        var year1 = new Date().getFullYear();
        var year2 = year1 - 1;
        var y1    = (year1 + "").substring(2, 4);
        var y2    = y1 - 1;

        for (var i = 0; i < fd.length; i++) {
          var kv = fd[i];
          kv.value = kv.value.trim();
          if (kv.name === 'name') {
            if (!/^[\u4e00-\u9fa5]+$/.test(kv.value)) {
              layer.msg("哎呀！你不是中文名吗！？");
              return false;
            }
            if (kv.value.length < 2) {
              layer.msg("请填写你的大名！不是小名...");
              return false;
            }
          } else if (kv.name === 'stuId') {
            if (kv.value.length !== 10) {
              layer.msg("请填写正确的学号！");
              return false;
            }
            var reg = new RegExp('^(' + year1 + '|' + year2 + ')');
            if (!reg.test(kv.value)) {
              layer.msg("学号格式有误！");
              return false;
            }
          } else if (kv.name === 'grade') {
            if (kv.value.length < 4) {
              layer.msg("班级信息不完整！");
              return false;
            }
            var reg = new RegExp('('+y1+'0|'+y2+'0)');
            if (!reg.test(kv.value)) {
              layer.msg("班级格式有误！");
              return false;
            }
            var stuId = $('#studentId').val();
            if (stuId !== '') {
              var y = stuId.substring(2, 4);
              if (kv.value.indexOf(y) === -1) {
                layer.msg("班级与学号不对应！");
                return false;
              }
            }
          } else if (kv.name === 'tel') {
            if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(kv.value)) {
              layer.msg("手机号格式错误！");
              return false;
            }
          } else if (kv.name === 'email') {
            if (kv.value.length < 9) {
              layer.msg("确定你的邮箱正确吗？换个正长点的！");
              return false;
            }
          } else if (kv.name === 'intro') {
            if (kv.value.length < 30) {
              layer.msg("自我简介不能少于30字！认真对待！");
              return false;
            }
          }
        }
        return true;
      }
    </script>
  </#if>
</div>
<#include "footer.ftl">